<template>
  <div id="home_center">
    <div class="container top_link">>>会展中心频道</div>
    <div class="container clearflx" style="position:relative;">
      <div class="home_center_left clearflx">
        <div class="home_center_leftTab">
          <router-link to>
            <p style="margin-bottom:28px;">展馆概况</p>
          </router-link>
          <router-link to>
            <p style="margin-bottom:28px;">展馆计划</p>
          </router-link>
          <router-link to>
            <p style="margin-bottom:28px;">展馆新闻</p>
          </router-link>
        </div>
        <div class="home_center_leftBanner">
          <swiper :options="swiperOption" ref="mySwiperRight">
            <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
              <img :src="slide" alt style="width:100%;display:block;" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      
      <div class="home_center_right clearflx">
        <div class="home_center_search">
          <form action method class="search_bottom clearflx">
            <input type="text" placeholder="请输入关键词" class="search_text" />
            <input type="submit" value="搜展馆" class="search_btn" />
          </form>
        </div>
        <div class="home_center_textImg clearflx">
            <img src="../../assets/home_CenterRightTetx.png" alt="" style="float:right;width:52px;">
        </div>
        <div class="home_center_rightBanner">
            <swiper :options="swiper" ref="mySwiperRight">
                <swiper-slide v-for="(slide1, index1) in bannerImg" :key="index1">
                <img :src="slide1" alt style="width:100%;display:block;" />
                </swiper-slide>
                <div class="swiper-pagination home_center_rightBpagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <!-- 中間的那文字 -->
      <div class="home_center_center">
          <h3>宜宾市临港会展中心</h3>
          <p>展馆地址：西安市长安南路与水厂路交汇处</p>
          <p>联系电话：123456789</p>
          <p>E-mail:123456789</p>
      </div>
      <div class="home_center_look">
          <span>查看详情>></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        autoplay: true,
        loop: true,
        // direction: "vertical",
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet", //需设置.my-bullet样式
          bulletActiveClass: "my-bullet-active"
        },
      },
      swiperSlides: [
        "../../assets/home/serverCenter_left.jpg",
        "../../assets/home/serverCenter_left.jpg",
        "../../assets/home/serverCenter_left.jpg"
      ],

      swiper: {
        autoplay: true,
        loop: true,
        // direction: "vertical",
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "my-dot", //需设置.my-bullet样式
          bulletActiveClass: "my-dot-active"
        },
      },
      bannerImg: [
        "../../assets/home/serverCenter_right.jpg",
        "../../assets/home/serverCenter_right.jpg",
        "../../assets/home/serverCenter_right.jpg"
      ],
    };
  }
};
</script>
<style lang="scss" scoped>
.top_link {
  text-align: right;
  color: #c81622;
  margin-bottom: 18px;
  padding-right: 24px;
}
.home_center_left {
  width: 560px;
  float: left;
  .home_center_leftTab {
    width: 160px;
    text-align: left;
    float: left;
  }
  .home_center_leftBanner {
    width: 400px;
    float: left;
    .swiper-container {
      width: 100%;
      // height: 100%;
      .swiper-wrapper {
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
      }
    }
  }
}
.home_center_right {
  width: 360px;
  float: right;
  .home_center_search {
    // width: 165px;
    margin-left: 195px;
    .search_bottom {
      width: 165px;
      display: block;
      .search_text {
        width: 94px;
        height: 10px;
        line-height: 10px;
        font-size: 12px;
        padding: 8px;
        border: 1px solid #c81622;
        float: left;
      }
      .search_btn {
        float: left;
        width: 48px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        color: #fff;
        background-color: #c81622;
        border: none;
      }
    }
  }
  .home_center_textImg{
      height: 200px;
  }
  .home_center_rightBanner{
      .swiper-container {
      width: 350px;
      // height: 100%;
      .swiper-wrapper {
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }

      }
    }
  }
}
.home_center_center{
    // width:360px;
    // padding:0px 0 40px 0px;
    padding-left: 30px;
    padding-bottom: 16px;
    background-color: #fff;
    position: absolute;
    left: 490px;
    top:124px;
    z-index: 1;
    text-align: left;
    > h3{
        line-height: 60px;
        color: #000;
        font-weight: 400;
    }
    > p{
        line-height: 30px;
        color: #848484;
        font-size: 14px;

    }
}
.home_center_look{
    position: absolute;
    left: 784px;
    bottom:0;
    z-index: 1;
    background-color: #fff;
    padding:10px;
    color: #c81622;
}
</style>